<template>
  <Modal v-model="show" title="按钮管理" :width="700">
    <Form ref="validForm" :model="formData" :rules="ruleValidate">
      <FormItem label="功能名" label-position="top">
        <Input placeholder="请输入功能名称" :modelValue="func.funcName" readonly/>
      </FormItem>

      <FormItem label="按钮名" label-position="top" prop="btnName">
        <Input v-model="formData.btnName" placeholder="请输入按钮名称"/>
      </FormItem>

      <FormItem label="权限标识" label-position="top" prop="btnRemark">
        <Input v-model="formData.btnRemark" placeholder="请输入权限标识,例如 `add`, 会自动添加功能权限标识作为前缀">
          <template #prepend>
            <span>{{ func.remark }}</span>
          </template>
        </Input>
      </FormItem>

      <FormItem label="状态" label-position="top" prop="state">
        <Switch size="large" v-model="formData.state">
          <template #open>
            <span>启用</span>
          </template>
          <template #close>
            <span>禁用</span>
          </template>
        </Switch>
      </FormItem>
    </Form>
    <template #footer>
      <Button style="margin-right: 8px" @click="show = false">关闭</Button>
      <Button type="primary" :loading="loading" @click="handleForm">保存</Button>
    </template>
  </Modal>
</template>

<script>


export default {
  props: {
    modelValue: {type: Boolean, required: true},
    func: {type: Object, required: true},
    btn: {type: Object, required: false, default: {btnName: "", remark: "", state: true}}
  },
  data() {
    return {
      formData: {
        id: this.btn.id ,
        btnName: this.btn.btnName,
        btnRemark: this.btn.remark.substring(this.func.remark.length + 1),
        state: this.btn.state
      } ,
      loading: false,
      ruleValidate: {
        btnName: [
          {required: true, message: "按钮名不允许为空", trigger: 'blur'},
          {type: "string", max: 100, message: "按钮名过长", trigger: 'blur'},
        ],
        btnRemark: [
          {required: true, message: "权限标识不能为空", trigger: 'blur'},
          {type: "string", pattern: /^\w+(:\w+)*?$/, message: "权限标识格式不正确", trigger: 'blur'},
        ],
        state: [
          {type: "boolean", message: "状态必须是一个boolean类型的值", trigger: "blur"}
        ]
      },
      columns: [
        {
          title: '按钮名',
          key: 'name'
        },
        {
          title: '权限标识',
          key: 'remark'
        },
        {
          title: '状态',
          key: 'status',
          slot: 'status',
          width: 100
        },
        {
          title: '操作',
          slot: 'action',
          width: 100,
          align: 'center'
        }
      ],
      data: [
        {
          id: 1,
          name: '添加用户',
          remark: 'memu:view:add',
          status: true
        },
        {
          id: 2,
          name: '修改用户',
          remark: 'memu:view:add',
          status: true
        },
        {
          id: 3,
          name: '删除用户',
          remark: 'memu:view:add',
          status: true
        },
        {
          id: 4,
          name: '查询用户信息',
          remark: 'memu:view:add',
          status: true
        },
        {
          id: 5,
          name: '册数数据',
          remark: 'memu:view:add',
          status: true
        },
      ],
    }
  },
  emits: ["close-win", "update:model-value"],
  methods: {
    handleForm() {
       this.loading = true ;
       this.$refs.validForm.validate(valid=> {
          if (valid) {
             if (this.btn.id == null) {
               this.saveBtn();
             } else{
               this.updateBtn();
             }
          }
          this.loading = false;
       })
    },
    saveBtn() {
      this.$tips.success("按钮保存成功");
      this.show = false ;
      // 关闭窗口、并传入功能ID
      this.$emit("close-win", this.func.id) ;
    },
    updateBtn() {
      this.$tips.success("按钮修改成功");
      this.show = false ;
      // 关闭窗口、并传入功能ID
      this.$emit("close-win", this.func.id) ;
    },
    resetValidForm() {
      this.$refs.validForm.resetFields();
    },
  },
  computed: {
    show: {
      set(newVal) {
        this.$emit("update:model-value", newVal);
      },
      get() {
        return this.modelValue;
      }
    },
  }
}
</script>

<style scoped>
.icon {
  vertical-align: middle;
  margin: 0 3px;;
}
</style>